<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-10-19 10:29:14
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-10-24 14:57:28
 * @FilePath: \backstage\src\components\public\peiNum.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="com-container makeUpEcharts he">
        <div class="com-chart" ref="echarts"></div>
    </div>
</template>
<script>
// import * as echarts from 'echarts'
export default {
    props: ["commonData"],
    data() {
        return {
            chartInstance: null,
            allData: null, // 服务器返回的数据
            //   x轴数据
            xData: null,
            currentPage: 1, //当前显示页数
            totalPage: 0, // 共有多少页
            timerId: null, // 定时器标识
            p1: 0,
        };
    },
    watch: {
        commonData: function () {
            setTimeout(() => {
                this.getData();
            }, 1500);
        },

        // activeIndex(val, oldVal) {
        // },
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();

            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
        })
        // setTimeout(() => {
        //     this.initChart();

        //     window.addEventListener("resize", this.screenAdapter);
        //     // 在页面加载完成的时候, 主动进行屏幕的适配
        //     this.screenAdapter();
        // }, 1000);
    },
    destroyed() {
        // 在组件销毁的时候, 需要将监听器取消掉
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.echarts);
            // let max = 200;
            // let value = 100;
            let colorBar = {
                type: 'linear',
                // 两端添加透明度,模拟两端线收缩
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(65, 197, 95, 1)', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'rgba(65, 197, 95, 1)', // 100% 处的颜色
                    }
                ],
            };
            let color = 'rgba(245, 246, 252, 1)';
            const initOption = {
                title: [
                    {
                        // text: '{c|' + '累计基桩数 ' + '}{a|' + max + '}',
                        x: 'center',
                        top: '2%',
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: 18,
                                    color: 'rgba(23, 26, 29, 0.6000)',
                                    fontWeight: 700
                                },

                                c: {
                                    fontSize: 14,
                                    color: 'rgba(23, 26, 29, 0.6000)',
                                    padding: [5, 0]
                                }
                            }
                        },

                    },
                    {

                        // text: '{a|' + value + ' ' + '}{a|' + ' ' + (value / max * 100).toFixed(2) + '%' + '}\n{c|' + '完成检测基桩' + '}',
                        x: 'center',
                        y: '59%',

                        textStyle: {
                            rich: {
                                a: {
                                    color: 'rgba(65, 197, 95, 1)',
                                    fontSize: 18,
                                    fontWeight: 700,
                                    // height: 30

                                },

                                c: {
                                    fontSize: 14,
                                    color: 'rgba(23, 26, 29, 0.6000)',
                                    // padding: [5, 0]
                                }
                            }
                        }
                    }
                ],
                angleAxis: {
                    show: false,
                    // max: (max * 360) / 180,
                    type: 'value',
                    startAngle: 180,
                    splitLine: {
                        show: false,
                    },
                },
                //圆环位置和大小
                polar: {
                    center: ['50%', '89%'],
                    radius: ['15%', '210%'],
                },
                radiusAxis: {
                    show: false,
                    type: 'category',
                },
                series: [
                    {
                        type: 'pie',
                        itemStyle: {
                            color: 'rgba(0,0,0,0)'
                        },
                        data: [1],

                    },
                    {
                        type: 'bar',
                        // data: [value],
                        stack: 'sameBar',
                        coordinateSystem: 'polar',
                        z: 3,
                        itemStyle: {
                            color: colorBar,

                        },
                    },

                    {
                        type: 'bar',
                        // data: [max - value],
                        stack: 'sameBar',
                        coordinateSystem: 'polar',
                        z: 3,
                        itemStyle: {
                            color: color,
                        },
                    },

                ],
            };
            this.chartInstance.setOption(initOption);
        },
        getData() {

            this.updateChart(this.commonData)
        },
        // 更新图表
        updateChart(data) {
            let max = data.foundationCount;
            let value = data.checkedFoundationCount;
            var rate;
            if (max != 0) {
                rate = (value / max * 100).toFixed(2)
            } else {
                rate = '0.00'
            }
            var dataOption = {
                title: [{
                    text: '{c|' + '累计基桩数 ' + '}{a|' + max + '}',
                }, {
                    text: '{a|' + value + ' ' + '}{a|' + ' ' + rate + '%' + '}\n{c|' + '完成检测基桩' + '}',
                }],
                angleAxis: {
                    max: (max * 360) / 180,

                },
                series: [
                    {

                    },
                    {
                        data: [value],
                    },

                    {
                        data: [max - value],
                    },

                ],


            };

            this.chartInstance.setOption(dataOption);
            // tools.loopShowTooltip(this.chartInstance, dataOption, {
            //   loopSeries: true,
            // });
        },

        // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
        screenAdapter() {
            // const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 3.6;
            const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 4;
            //   和分辨率大小相关的配置项
            const adapterOption = {
                title: [
                    {
                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: titleFontSize * 1.285,

                                },

                                c: {
                                    fontSize: titleFontSize,
                                }
                            }
                        },

                    },
                    {


                        textStyle: {
                            rich: {
                                a: {
                                    fontSize: titleFontSize * 1.285,
                                    height: titleFontSize * 2.143
                                },

                                c: {
                                    fontSize: titleFontSize,
                                    padding: [titleFontSize * 0.357, 0]
                                }
                            }
                        }
                    }
                ],
                series: [
                    {

                    },
                    {
                        barWidth: titleFontSize * 2.857,
                    },
                    {
                        barWidth: titleFontSize * 2.857,
                    }

                ]
            };
            this.chartInstance.setOption(adapterOption);
            // 手动的调用图表对象的resize 才能产生效果
            this.chartInstance.resize();
        },
    },
};
</script>

<style lang="less" scoped>

</style>
